import { useState } from "react"
import { useSearchParams } from "react-router-dom"

export default function BookDetail() {
  const bookListHook = useState([
    { name: "js高级设计", sale: 20, price: 18 },
    { name: "java零基础开发", sale: 29, price: 3 },
    { name: "js设计模式", sale: 100, price: 109 }
  ])
  const [bookList] = bookListHook
  const [routeParams] = useSearchParams()
  const currentBook = bookList.filter(
    (item) => item.name === routeParams.get("name")
  )[0]
  currentBook.sale = routeParams.get("sale")
  console.log(currentBook)
  return (
    <div>
      <h4>书籍详情页：</h4>
      <li key={currentBook.name}>
        书名：{currentBook.name}, 销量: {currentBook.sale}， 价格：
        <span style={{ color: "red" }}>{currentBook.price}</span>
      </li>
    </div>
  )
}
